<template>
  <div id="box">
    <div class="top" style="margin-bottom: 20px;">
      <Button type="primary" @click="add=true">新增用户+</Button>
    </div>
    <div class="center">
      <Table stripe :columns="userColumns" :data="userData" :loading="loading"></Table>
      <Modal v-model="add" wdith="800" title="添加账号" :closable="false" :mask-closable="false">
        <Form ref="adding" :model="adding" :label-width="100" :rules="addRules">
          <FormItem prop="name" label="用户名:" style="width: 250px">
            <Input v-model="adding.name" placeholder="用户名" style="width: 200px"/>
          </FormItem>
          <FormItem prop="phone" label="手机号:" style="width: 250px">
            <Input v-model="adding.phone" placeholder="手机号" style="width: 200px"/>
          </FormItem>
          <FormItem prop="motion" label="状态:" style="width: 250px">
            <Select v-model="adding.motion" style="width: 200px">
              <Option v-for="(item,index) in motionList" :key="item.index" :value="item.value">{{item.label}}</Option>
            </Select>
          </FormItem>
        </Form>
        <div slot="footer">
          <Button type="default" @click="addCancel('adding')">取消</Button>
          <Button type="primary" @click="addConfrim('adding')" :loading="addload">确定</Button>
        </div>
      </Modal>
      <Modal v-model="modify" wdith="800" title="修改账号" :closable="false" :mask-closable="false">
        <Form ref="modifying" :model="modifying" :label-width="100" :rules="modifyRules">
          <FormItem prop="name" label="用户名:" style="width: 250px">
            <Input v-model="modifying.name" placeholder="用户名" style="width: 200px"/>
          </FormItem>
          <FormItem prop="phone" label="手机号:" style="width: 250px">
            <Input v-model="modifying.phone" placeholder="手机号" style="width: 200px"/>
          </FormItem>
          <FormItem prop="motion" label="状态:" style="width: 250px">
            <Select v-model="modifying.motion" style="width: 200px">
              <Option v-for="(item,index) in motionList" :key="item.index" :value="item.value">{{item.label}}</Option>
            </Select>
          </FormItem>
        </Form>
        <div slot="footer">
          <Button type="default" @click="changeCancel('modifying')">取消</Button>
          <Button type="primary" @click="changeConfrim('modifying')" :loading="addload">确定</Button>
        </div>
      </Modal>
      <Modal v-model="chan" wdith="800" title="修改密码" :closable="false" :mask-closable="false">
        <Form ref="chaning" :model="chaning" :label-width="100" :rules="chanRules">
          <FormItem prop="after" label="原密码:" style="width: 250px">
            <Input  type="password" v-model="chaning.after" placeholder="原密码" style="width: 200px"/>
          </FormItem>
          <FormItem prop="before" label="新密码:" style="width: 250px">
            <Input type="password" v-model="chaning.before" placeholder="新密码" style="width: 200px"/>
          </FormItem>
          <FormItem prop="beforeAgin" label="确认新密码:" style="width: 250px">
            <Input type="password" v-model="chaning.beforeAgin" placeholder="确认新密码" style="width: 200px"/>
          </FormItem>
        </Form>
        <div slot="footer">
          <Button type="default" @click="chanCancel('chaning')">取消</Button>
          <Button type="primary" @click="chanConfrim('chaning')" :loading="addload">确定</Button>
        </div>
      </Modal>
      <Modal v-model="del" title="删除操作确认提示:" :closable="false">
        <p style="color: red">
          本次进行删除数据操作，是否确认？</p>
        <div slot="footer">
          <Button type="default" size="large" @click="del=false">取消</Button>
          <Button type="primary" size="large" @click="delConfrim()" :loading="addload">确认</Button>
        </div>
      </Modal>
    </div>
  </div>

</template>

<script>
  export default {
    name: "userManage",
    data() {
      return {
        loading: false,
        addload: false,
        userColumns: [
          {
            title: '数据ID',
            align: 'center',
            key: 'id'
          },
          {
            title: '用户名',
            align: 'center',
            key: 'name'
          },
          {
            title: '手机号',
            align: 'center',
            key: 'mobile'
          },
          {
            title: '用户动态',
            align: 'center',
            key: 'status',
            render: (h, params) => {
              let txt = "";
              if (params.row.status == 0) {
                txt = "启用"
              } else if (params.row.status == 1) {
                txt = "禁用"
              }
              return h('div', txt);
            }
          },
          {
            title: '操作',
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'warning',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.change(params.index)
                    }
                  }
                }, '修改信息'),
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.changeWord(params.index)
                    }
                  }
                }, '修改密码'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.delete(params.index)
                    }
                  }
                }, '删除'),
              ])
            }
          },
        ],
        userData: [],
        motionList: [
          {
            label: '启用',
            value:'0',
          },
          {
            label: '禁用',
            value:'1',
          },
        ],
        add: false,
        modify: false,
        chan:false,
        del:false,
        adding: {
          name: '',
          phone: '',
          motion: '',
        },
        modifying: {
          name: '',
          phone: '',
          motion: '',
        },
        chaning:{
          after:'',
          before:'',
          beforeAgin:'',
        },
        addRules: {
          name: [
            { required: true, message: '用户名不能为空', trigger: 'blur' }
          ],
          phone: [
            {required: true, message: '电话不能为空', trigger: 'blur'},
            {
              type: 'string',
              pattern: 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/,
              message: '请输入11位的电话号码',
              trigger: 'blur'
            }
          ],
          motion: [
            { required: true, message: '状态不能为空', trigger: 'change',}
          ],
        },
        modifyRules: {
          name: [
            { required: true, message: '用户名不能为空', trigger: 'blur' }
          ],
          phone: [
            {required: true, message: '电话不能为空', trigger: 'blur'},
            {
              type: 'string',
              pattern: 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/,
              message: '请输入11位的电话号码',
              trigger: 'blur'
            }
          ],
          motion: [
            { required: true, message: '状态不能为空', trigger: 'change',}
          ],
        },
        chanRules:{
          after: [
            { required: true, message: '原密码不能为空', trigger: 'blur' },
            {
              type: 'string',
              pattern: /^[\w_-]{6,16}$/,
              message: '最短6位，最长16位的密码',
              trigger: 'blur'
            }
          ],
          before: [
            { required: true, message: '原密码不能为空', trigger: 'blur' },
            {
              type: 'string',
              pattern: /^[\w_-]{6,16}$/,
              message: '最短6位，最长16位的密码',
              trigger: 'blur'
            }
          ],
          beforeAgin: [
            { required: true, message: '原密码不能为空', trigger: 'blur' },
            {
              type: 'string',
              pattern: /^[\w_-]{6,16}$/,
              message: '最短6位，最长16位的密码',
              trigger: 'blur'
            }
          ],
        },
      }
    },
    methods: {
      //获取列表
      getData() {
        this.$http.get('/user/list')
          .then(res => {
            if (res.data.status == 200) {
              this.userData = res.data.data;
            } else {
              this.$Message.error(res.data.errors.msg);
            }
          })
      },

      //添加取消
      addCancel(name) {
        this.add = false;
        this.$refs[name].resetFields();
      },
      //添加确认
      addConfrim(name) {
        let data = {
          name: this.adding.name,
          mobile: this.adding.phone,
          status: this.adding.motion,
        }
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.addload = true;
            this.$http.post('/user/add', data)
              .then(res => {
                if (res.data.status == 200) {
                  this.$Message.success(res.data.message);
                  this.addload = false;
                  this.add = false;
                  this.getData();
                  this.$refs[name].resetFields();
                } else {
                  this.$Message.error(res.data.message);
                  this.addload = false;
                  this.add = true;
                }
              })
          }
        })
      },

      //修改打开
      change(index) {
        this.modify=true;
        sessionStorage.setItem('id',this.userData[index].id);
        this.modifying.name=this.userData[index].name;
        this.modifying.phone=this.userData[index].mobile;
        this.modifying.motion=this.userData[index].status;

      },
      //修改取消
      changeCancel(){
        this.modify=false;
      },
      //修改确认
      changeConfrim(name){
        let id=sessionStorage.getItem('id');
        let data = {
          id:id,
          name: this.modifying.name,
          mobile: this.modifying.phone,
          status: this.modifying.motion,
        };
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.addload = true;
            this.$http.post('/user/update', data)
              .then(res => {
                console.log(res);
                if (res.data.status == 200) {
                  this.$Message.success(res.data.message);
                  this.addload = false;
                  this.modify=false;
                  this.getData();
                  this.$refs[name].resetFields();
                } else {
                  this.$Message.error(res.data.message);
                  this.addload = false;
                  this.modify=true;
                }
              })
          }
        })
      },

      //修改密码
      changeWord(index){
        this.chan=true;
        sessionStorage.setItem('id',this.userData[index].id);
      },
      //修改密码取消
      chanCancel(name){
        this.chan=false;
        this.$refs[name].resetFields();
      },
      //修改密码确认
      chanConfrim(name){
        let id=sessionStorage.getItem('id');
        let data={
          id:id,
          password:this.chaning.after,
          newPwd:this.chaning.before,
        };
        this.$refs[name].validate((valid) => {
          if (valid){
            if(this.chaning.before!=this.chaning.beforeAgin){
               this.$Message.error("两次密码不一样，请确认密码！")
            }else{
              this.addload = true;
              this.$http.post('/user/updatePwd', data)
                .then(res => {
                  console.log(res);
                  if (res.data.status == 200){
                    this.$Message.success(res.data.message);
                    this.addload = false;
                    this.chan=false;
                    this.getData();
                    this.$refs[name].resetFields();
                  } else {
                    this.$Message.error(res.data.message);
                    this.addload = false;
                    this.chan=true;
                  }
                })
            }
          }
        })

      },

      //删除打开
      delete(index){
        this.del=true;
        sessionStorage.setItem('id',this.userData[index].id);
      },
      delConfrim(){
        let id=sessionStorage.getItem('id');
        this.$http.delete('/user/'+id,)
          .then(res => {
            console.log(res);
            if (res.data.status == 200) {
              this.$Message.success(res.data.message);
              this.addload = false;
              this.del=false;
              this.getData();
            } else {
              this.$Message.error(res.data.message);
              this.addload = false;
              this.del=true;
            }
          })
      }
    },
    mounted() {
      this.getData();
    }
  }
</script>

<style scoped>

</style>
